<template>
	<view class="container">
		<image style="height: 100%;width: 100%;position: absolute;" :src="bg_img"></image>
		<view>
			<diy-nav title="身份选择" :bgColor2="statusBgColor" :is_relative="true" ></diy-nav>
		</view>
		<view style="margin: 54rpx;">
			<!-- <image mode="aspectFill" style="width: 100%;height: 288rpx" src="/static/temp/role-check.png"></image> -->
			<image mode="aspectFill" style="width: 100%;height: 288rpx;position: relative;"  :src="tip_img"></image>
		</view>
		<view class="middle-content">
			<view v-for="(item,index) in range" :key="index" class="list-item" @click="checkRole(item.value)">
				<view class="info">
					<view style="flex: 1;">{{item.text}}</view>
					<image v-show="item.value==selected"   src="/static/temp/select.png"></image>
				</view>
				<view v-if="index!=range.length-1" class="line"></view>
				<view v-else class="no-line"></view>
			</view>
		</view>
		<button class="confirm-btn" @click="toNav">确定</button>
	</view>
</template>

<script>
	import {mapMutations} from 'vuex';
	import DiyNav from "@/components/diy-nav-back";
	import Api from '@/common/api';
	export default{
		components: {
			DiyNav
		},
		data(){
			return {
				selected:2,
				range: [
					{text:'学生',value:2},
					{text:'老师',value:1},
					{text:'爱心企业',value:3}
				],
				statusBgColor:'transparent',
				bg_img:'',
				tip_img:'',
				show_contact:false,
				school_contact:''
			}
		},
		onLoad(option){
			this.loadPlatformResource();
			if(option.role){
				this.checkRole(option.role)
			}
		},
		
		methods: {
			...mapMutations(['setRole','logout']),
			async loadPlatformResource(){
				let data = await Api.apiCall('get',Api.apiName.platform_resource);
				if(!data){
					return;
				}
				this.bg_img=data.data.basic.role_select_bg;
				this.tip_img=data.data.basic.role_select_tip;
				this.show_contact=data.data.basic.contact_state;
				this.school_contact=data.data.basic.school_contact;
			},
			async toNav(){
				if(!this.selected){
					this.$api.msg('请选择身份');
					return;
				}
			
				let param ={role_value:this.selected}
				let data = await Api.apiCall('post',Api.apiName.update_user,param);
				if(!data){
					return;
				}
				let res = data.data;
				if(!res){
					this.$api.msg(`切换身份失败`);
					return;
				}
				
				if(this.selected==1){
					let res = await Api.apiCall('get',Api.apiName.teacher_detail,{},true);
					if(!res||res.data.approve_status!=2){//未填写过资料或资料未通过
						uni.navigateTo({
							url:`/pages/public/teacher`
						})
						return;
					}else{
						this.setRole(this.selected);//update_user接口请求成功后且后台身份通过后（主要是老师，爱心企业两个身份）再调用此方法
						uni.switchTab({
							url:`/pages/course/index`
						});
					}
				}else if(this.selected==2){//学生直接跳转
					this.setRole(this.selected);//update_user接口请求成功后且后台身份通过后（主要是老师，爱心企业两个身份）再调用此方法
					uni.switchTab({
						url:`/pages/course/index`
					});
					return;
				}else{
					let res = await Api.apiCall('get',Api.apiName.user_company,{},true);
					if(!res||res.data.status==0){
						// this.logout();//失败后清除登录信息，防止刷新或者“重新”进入小程序信息不完善导致异常
						let _msg='请联系夜校客服添加';
						if(this.show_contact==1){
							_msg+=',联系人：'+this.school_contact;
						}
						this.$api.msg(_msg,10000);
						// setTimeout(function(){
						// 	uni.switchTab({
						// 		url:`/pages/course/index`
						// 	});
						// },10000)
						return;
					}else{
						this.setRole(this.selected);//update_user接口请求成功后且后台身份通过后（主要是老师，爱心企业两个身份）再调用此方法
						uni.switchTab({
							url:`/pages/course/index`
						});
						return;
					}
					
				}
			},
			checkRole(val){
				this.selected=val;
			},
		},

	}
</script>

<style lang='scss'>
	page{
		/* background-image: url("https://pic.rmb.bdstatic.com/bjh/914b8c0f9814b14c5fedeec7ec6615df5813.jpeg");
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center center; */
	}
	.container{
	
	}
	
	.input-content{
		padding: 0 60upx;
		margin-top: 300rpx;
	}


	.confirm-btn{
		
		width: 630upx;
		height: 76upx;
		line-height: 76upx;
		border-radius: 10rpx;
		margin-top: 100upx;
		background: #0191FF;
		color: #fff;
		font-size: $font-lg;
		
	}
	.middle-content{
		margin: 30rpx;
		background: #FFFFFF;
		position: relative;
		border-radius: 10rpx;
	}
	.list-item{
		display: flex;
		flex-direction: column;
		image{
			width: 34rpx;
			height: 25rpx
		}
	}
	.info{
		display: flex;
		padding: 30rpx 80rpx;
		align-items: center;
	}
	.line{
		height: 2rpx;
		background: #ECECEC;
		width: 100%;
	}
	.no-line{
		height: 2rpx;
		width: 100%;
		
	}
</style>
